<template>
  <div>
    <div class="add">
      <button @click="addFollow(1)">官方认证火星网友</button>
      <button @click="addFollow(2)">广州新闻</button>
      <button @click="addFollow(3)">娱乐在线</button>
      <button @click="addFollow(4)">新华网</button>
      <button @click="addFollow(5)">火星时报</button>
      <button @click="addFollow(6)">银河护卫队</button>
    </div>
    <div class="p">检测到当前您没有关注的文章博主，已给您推荐以上博主！</div>
    <div class="btn">
      <button @click="addFollows">一键关注</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showw: false
    };
  },
  methods: {
    addFollow(id) {
      this.$axios({
        url: "/user_follows/" + id,
        method: "get"
      }).then(res => {
        // console.log(res.data.message);
      });
    },

    addFollows() {
      for (let i = 1; i <= 6; i++) {
        this.addFollow(i);
      }
      this.$toast.success("关注成功！");
      this.$emit("btn", this.showw);
    }
  }
};
</script>
<style lang="less" scoped>
.add {
  margin: 50px 0 0 15px;
  text-align: center;
  .red {
    color: beige;
    background-color: red;
  }
  button {
    font-size: 12px;
    width: 130px;
    height: 30px;
    border-radius: 10px;
    margin: 5px;
    padding: 5px;
    outline: none;
    border: none;
  }
}
.p {
  font-size: 12px;
  padding: 30px;
}
.btn {
  font-size: 12px;
  margin-left: 110px;
  button {
    width: 100px;
    height: 30px;
    border-radius: 15px;
    outline: none;
    border: none;
    background-color: red;
    color: beige;
  }
}
</style>
